<%@ page contentType="text/html;charset=utf-8" language="java"
	pageEncoding="UTF-8" import="java.util.Date"%>
<%@include file="../../common/mastertopedit.jsp"%>
<style>

	.list-group-item{border-left: none;border-right: none;border-top: none;margin-bottom: 0;}
	.w-50{width:calc(50% - 60px);}
	.w-60{width:120px;}
	/*.list-group .list-group-item:last-child{border-bottom: none;}*/
</style>
<input type="hidden" id="userId" value="${model.userId}">
<input  id="userId" value="${model.userInfo.realName}">
<div class="pt-15" id="content">
	<div class="pull-left w-50">
	    <span>未绑定</span>
        <div class="input-group mb-5">
            <input type="text" class="form-control search search1" placeholder="供应商编码/名称/简称">
            <span class="input-group-btn">
        <button onclick="tosearch('.search1')" class="btn btn-default" type="button">搜索</button>
      </span>
        </div>
        <div class="list-group" style="height: 600px;overflow: auto;">
            <table class="table table-bordered  table-hover">
                <thead>
                    <tr>
                        <th style="width:40px"><input type="checkbox" link-age="first" is-parent=""></th>
                        <th>供应商编码</th>
                        <th>供应商名称</th>
                        <th>供应商简称</th>
                    </tr>
                </thead>
                <tbody id="addgroup">
                    <c:forEach items="${model.unBingMerchants}" var="lo" varStatus="itemStatus">
                        <tr code="${lo.factoryCode}" name="${lo.factoryName}" sort-name="${lo.factoryShortName}">
                            <td><input type="checkbox" name="poItem_checkbox" link-age="first" is-sub="" value="${lo.id}"></td>
                            <td>${lo.factoryCode}</td>
                            <td>${lo.factoryName}</td>
                            <td>${lo.factoryShortName}</td>
                        </tr>
                    </c:forEach>

                </tbody>
            </table>
        </div>


	</div>

	<div class="text-center pull-left w-60"  style="padding-top: 130px;"><span class="icon-btn mb-10"
									 onclick="add()">添加 <i style="margin-top: -3px;" class="glyphicon glyphicon-arrow-right"></i></span>
			<span class="icon-btn"
            									 onclick="remove()"><i style="margin-top: -3px;" class=" glyphicon glyphicon-arrow-left"></i>移除</span>
									 </div>
	<div class="pull-left w-50">
        <span>已绑定</span>
        <div class="input-group mb-5">
            <input type="text" class="form-control search search2" placeholder="供应商编码/名称/简称">
            <span class="input-group-btn">
        <button onclick="tosearch('.search2')" class="btn btn-default" type="button">搜索</button>
      </span>
        </div>
            <div class="list-group" style="height: 600px;overflow: auto;">
                <table class="table table-bordered  table-hover">
                    <thead>
                        <tr>
                            <th style="width:40px"><input type="checkbox" link-age="second" is-parent=""></th>
                            <th>供应商编码</th>
                            <th>供应商名称</th>
                            <th>供应商简称</th>
                        </tr>
                    </thead>
                    <tbody id="removegroup">
                        <c:forEach items="${model.bingMerchants}" var="lo" varStatus="itemStatus">
                            <tr code="${lo.factoryCode}" name="${lo.factoryName}" sort-name="${lo.factoryShortName}">
                                <td><input type="checkbox" name="poItem_checkbox" link-age="second" is-sub="" value="${lo.id}"></td>
                                <td>${lo.factoryCode}</td>
                                <td>${lo.factoryName}</td>
                                <td>${lo.factoryShortName}</td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
    </div>

	<div class="text-center"></div>

</div>
<div class="form-group text-center pt-15">
	<button type="button" class="runmi-btn runmi-primary"
		onclick="backIndex()">取消</button>
	<button type="button" class="runmi-btn runmi-sure-btn" onclick="save()">保存</button>
</div>

<script type="text/javascript">

	$('#content').on('click','.list-group-item',function () {
		var $this = $(this),
			hasActive = $this.hasClass('active');
		$this[hasActive ? 'removeClass' : 'addClass']('active');
    })

	var $addgroup = $('#addgroup'),
		$removegroup = $('#removegroup');

	//添加
	function add() {
		var $active = $addgroup.find('tr:visible input:checked');
        $active.length && $removegroup.prepend($active.prop('checked',false).attr('link-age','second').parents('tr'));
        $('input[is-parent]').prop('checked',false);
    }
    //移除
    function remove() {
        var $active = $removegroup.find('tr:visible input:checked');
        $active.length && $addgroup.prepend($active.prop('checked',false).attr('link-age','first').parents('tr'));
        $('input[is-parent]').prop('checked',false);
    }

    $('.search').on('input',function () {
        var $this = $(this),
            is1 = $this.hasClass('search1');
        searchFilter(is1 ? $addgroup : $removegroup,$this.val())
    })

    function searchFilter($par,value) {
        value = value.trim().toLowerCase();
        var $tr = $par.children('tr');
        $tr.each(function (index,ele) {
            var $ele = $(ele),
                code = $ele.attr('code'),
                name = $ele.attr('name'),
                sortName = $ele.attr('sort-name');
            var isfilter = ~code.toLowerCase().indexOf(value) || ~name.toLowerCase().indexOf(value) || ~sortName.toLowerCase().indexOf(value);
            if(isfilter){
                $ele.show()
            }else{
                $ele.hide()
            }
        })
        $par.find('input[type="checkbox"]').prop('checked',false);
    }

    function tosearch(str) {
        $(str).trigger('input');
    }

	function save() {
	    var $merchantIds = $removegroup.find('input[type="checkbox"]');
		var postData = "&userId=" + $('#userId').val();
        if($merchantIds.length){
            $merchantIds.each(function (index,ele) {
                postData += '&merchantIds=' + $(ele).val();
            })
		}
		layer.load(1, {
			shade : [ 0.5, '#fff' ]
		});
		//alert(postData);
		$.ajax({
			type : "POST",
			url : "savemerchant",
			data : postData,
			contentType : "application/x-www-form-urlencoded;charset=UTF-8",
			async : true, // 同步  true 异步。默认是异步
			dataType : 'json',
			error : function(resultdata) {
				layer.closeAll();
			},
			success : function(resultdata) {
				layer.closeAll();
				if (resultdata.returnCode == "0000") {
					layer.alert('操作成功', {
						icon : 1
					}, function() {
						parent.editReturn();
						//layer.closeAll(); 
						//layer.closeAll();
						//window.location.href="${pageContext.request.contextPath}/distrbutor/inventory/index";
					});
				} else {
					layer.alert(resultdata.returnMessage);
				}
			}
		});
	}
	function backIndex() {
		parent.editReturn();
	}
</script>
<%@include file="../../common/masterbottom.jsp"%>
